<style>
	.page{
		background: #fff;
	}
	.publish-head{
		height: 370rpx;
		width: 100%;
		overflow: hidden;
	}
	.publish-text{
		position: relative;
		height: 435rpx;
		background: #fff;
		margin-top: 2rpx;
	}
	.publish-input{
		width: 100%;
		height: 100%;
		padding-left: 41rpx;
	}
	.publish-msg{
		position: absolute;
		left: 41rpx;
		top: 32rpx;
		color: #989898;
		font-size: 29rpx
	}
	.publish-textarea{
		padding-left: 41rpx;
		padding-top: 32rpx;
		color: #989898;
	}
	.publish-middle{
		margin-top: 8rpx;
		min-height: 212rpx;
		background: #fff;
	}
	.publish-images{
		width: 710rpx;
		margin-left: 41rpx;
		height: 100%;
		overflow: hidden;
	}
	.publish-upload{
		float: left;
		width: 149rpx;
		height: 155rpx;
		margin-top: 31rpx;
	}
	.publish-upload image{
		width: 100%;
		height: 100%;
	}
	.publish-have-upload{
		margin-top: 31rpx;
		float: left;
		height: auto;
		max-width: 550rpx;
	}
	.image-box{
		width: 149rpx;
		height: 155rpx;
		position: relative;
		float: left;
		margin-left: 28rpx;
		margin-bottom: 20rpx;
	}
	.delete-image{
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(0,0,0,0.5);
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		z-index: 9;
	}
	.publish-have-upload image{
		height: 100%;
		width: 100%;
		border: 1rpx solid #eee;
		border-radius: 7rpx;
	}
	.publish-address{
		height: 85rpx;
		background: #fff;
	}
	.publish-address-content{
		width: 90%;
		margin: 0 auto;
		padding-top: 22rpx;
		border-top: 1rpx solid #e5e5e5;
	}
	.transfer_address{
		width: 26rpx;
		height: 34rpx;
		float: left;
	}
	.publish-location{
		color: #4c4c4c;
		margin-left: 12rpx;
	}
	.publish-bottom{
		height: 252rpx;
		width: 100%;
	}
	.publish-option-box{
		height: 85rpx;
		line-height: 85rpx;
		background: #fff;
		width: 100%;
	}
	.publish-option{
		width: 90%;
		margin: 0 auto;
		height: 100%;
		border-bottom: 2rpx solid #e5e5e5;
	}
	.publish-option-title{
		float: left;
		font-size: 28rpx;
	}
	.publish-option-choose{
		float: right;
		color: #b1b1b1;
	}
	.publish-option-choose image{
		height: 21rpx;
		width: 12rpx;
		margin-left: 20rpx;
	}
	.publish-symbol{
		color: #f23030;
		font-size: 28rpx;
		float: left;
		margin-right: 10rpx;
	}
	.publish-price{
		height: 85rpx;
		width: 115rpx;
		color: #b1b1b1;
	}
	.publish-price-place{
		color: #b1b1b1;
	}
	
	
	.z-show {
		transform: translateX(0) !important;
	}
	
	.publish-picker:after{
		content: '';
		display: block;
		clear: both;
	}
	.publish-btn-bg{
		width: 100%;
		height: 108rpx;
	}
	.publish-btn{
		background: #f77777;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 8;
	}
	.video_box {
		width: 142px;
		height: 142px;
		margin-left: 10px;
		margin-bottom: 20rpx;
	}
	.publish-line{
		width: 1rpx;
		background: #e5e5e5;
	}
</style>
<template>
	<view class="page">
		<view class="publish-head">
			<view class="publish-text">
				<view class="publish-msg" :style="{'display': isShow == '1' ? 'block' : 'none'}">
					<br />转手原因、入货渠道、尺寸规格、新旧程度和使用感受等~
				</view>
				<textarea v-model="transfer_row.content" class="publish-textarea" adjust-position="false" @focus="text_focus" @blur="text_blur" @input="text_input"/>
			</view>
		</view>
		<view class="publish-middle">
			<view class="publish-images">
				<view class="publish-upload" @tap="choose_image">
					<image src="../../static/icons/transfer/transfer_choose_image.png" mode=""></image>
				</view>
				<view class="publish-have-upload">
					
					<view class="image-box" v-for="(item, index) in imageList" :key="index">
						<image :src="item.temp?item.temp:item.photo" mode=""></image>
						<view class="delete-image" @tap="delete_image" :data-image="item.url">删除图片</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="publish-middle">
			<view class="publish-images">
				<view class="publish-upload" @tap="choose_video">
					<image src="../../static/images/transfer/transfer_video.png" mode=""></image>
				</view>
				<view class="publish-have-upload">
					<video width='30' muted='true' height='30' :style="{'display': videoDisplay == '1'?'block':'none'}" :src='video_src' controls class="video_box"></video>
				</view>
			</view>
		</view>

		<view class="publish-address">
			<view class="publish-address-content" @tap="showMulLinkageThreePicker">
				<image src="../../static/icons/transfer/transfer_address.png" class="transfer_address" mode=""></image>
				<text class="publish-location">{{pickerText}}</text>
			</view>
		</view>
		<!-- 地址框 -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
		<view class="publish-bottom">
			<!-- <view class="publish-option-box">
				<view class="publish-option">
					
					<view class="publish-picker" type="primary" @tap="changeShow('QS_Picekr_custom_3')">
						<view class="publish-option-title" v-if="transfer_id">
							{{transfer_row.cate_path?transfer_row.cate_path:'分类'}}
						</view>
						<view class="publish-option-title" v-else>
							{{sel_class_name?sel_class_name:'分类'}}
						</view>
						<view class="publish-option-choose">
							<text v-if="!sel_class_name">请选择</text>
							<image src="../../static/icons/transfer/transfer_icon.png" mode=""></image>
						</view>
					</view>
										 
				</view>
			</view> -->
			<view class="publish-line"></view>
			<view class="publish-option-box">
				<view class="publish-option">
					<view class="publish-option-title">
						价格
					</view>
					<view class="publish-option-choose">
						<text class="publish-symbol">￥</text>
						<input type="digit" v-model="buyout_price" class="publish-price" placeholder-class='publish-price-place' placeholder="请填写" />
					</view>
				</view>
			</view>
			<view class="publish-btn-bg"></view>
		</view>
		
		
		<view class="publish-category"></view>
		
		<view class="publish-btn" @tap="release">
			发布宝贝
		</view>
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import area from '@/components/mpvue-citypicker/city-data/area.js';
	import city from '@/components/mpvue-citypicker/city-data/city.js';
	import province from '@/components/mpvue-citypicker/city-data/province.js';
	export default { 
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				themeColor: '#007AFF',
				placeholder: '',
				isShow: 1,
				title:'', //商品标题
				content:'',//商品内容
				buyout_price:'',//价格
				bIsShowAttr: false,
				imageList: [],//图片列表
				last_class_id:'',//所属分类 最后一级
				sel_class_name:'', 
				bIsShowLoading: false,
				pickerText: '选择宝贝位置',
				province: '',//省 id
				city: '',//市 id
				zone: '',//区 id
				customSet_3: {
					itemArray: [{
						name:"1",
						id:0,
						children:[{
							name:' ',
							id:0,
							children:[{
								name:' ',
								id:0,
							}]
						}]
					}],
					steps: {
						step_1_value: "name",
						step_2_value: "name",
						step_2_item: "children",
						step_3_value: "name",
						step_3_item: "children"
					},
					linkageNum: 3, //3 表示为3级联动
					linkage: true ,//true 表示开启联动
				},
				attr: [],
				spec: [],
				video_src: ''	,// 视频路径
				videoDisplay: 0,
				show_attr_box: 0,
				transfer_row: [],
				transfer_id: 0,
				attr_ids:[],		// 属性id(当前页面选择的)（添加情况下）
				spec_ids:[],    	// 规格id(当前页面选择的)（添加情况下）
				select_attr: [],	// 数据表存在的（修改情况下）
				select_spec: []		,// 数据表存在的（修改情况下）
				show_more_attr: 0	// 如果存在规格，显示特定问题（修改的情况下）
			}
		},
		onLoad(options) {
			let that = this;
			that.bIsShowLoading = true;
			henglang.get('Pawn/getCategory',{},false,function(res){
				that.bIsShowLoading = false;
				that.customSet_3 = {
					itemArray: res.data.data,
					steps: {
						step_1_value: "name",
						step_2_value: "name",
						step_2_item: "children",
						step_3_value: "name",
						step_3_item: "children"
					},
					linkageNum: 3, //3 表示为3级联动
					linkage: true //true 表示开启联动
				};
			});
			if(options.id) {
				that.transfer_id = options.id;
				that.bIsShowLoading = true;
				henglang.get('Pawn/transfer_view',{id: options.id, edit: 1},false,function(res){
					that.bIsShowLoading = false;
					let resdata = res.data;
					that.transfer_row = resdata;
					if(that.transfer_row.content !='') that.isShow = 0;
					if(that.transfer_row.show_more_attr == 1) {
						that.show_more_attr = resdata.show_more_attr;
						that.show_attr_box = 1;
						that.title = resdata.title;
						that.content = resdata.content;
						that.buyout_price = resdata.buyout_price;
						that.last_class_id = resdata.cate_id
						let postdata = {
							category_id: that.transfer_row.cate_id,
							id: options.id
						};
						that.QueryAttrWithCategoryId(postdata);
						that.spec_ids = resdata.spec_ids;
						that.attr_ids = resdata.attr_ids;
						that.select_spec = resdata.select_spec;
						that.select_attr = resdata.select_attr;
						if(resdata.video_src) {
							that.videoDisplay = 1;
							that.video_src = resdata.video_src;
						}
						if(resdata.photos) {
							that.imageList = resdata.photo_edit;
						}
						if(resdata.address_text) {
							that.pickerText = resdata.address_text.province + ' ' + resdata.address_text.city + ' ' + resdata.address_text.zone;
							that.province = resdata.province;
							that.city = resdata.city;
							that.zone = resdata.zone;
						}
					}
				});
			}
			
		},
		methods:{
			choose_video(){
				if(this.video_src == '') {
					let that = this;
					uni.chooseVideo({
						sourceType: ['album', 'camera'],
						count: 1,
						success: function (res){
							that.videoDisplay = 1;
							that.video_src = res.tempFilePath;
						}
					})
				}else{
					henglang.showToast('只能上传' + this.videoList + '个小视频', 1500);
				}
			},
			uploadFile(videoSrc){
				let that = this;
				return new Promise((resolve) => {
					uni.uploadFile({
						url: henglang.host + 'Pawn/upload_video', //仅为示例，非真实的接口地址
						filePath: videoSrc,
						fileType: 'video',
						name: 'video',
						formData: {'app-key': henglang.app_key},
						success: (uploadFileRes) => {
							if(uploadFileRes.code == '-1') {
								henglang.showToast(uploadFileRes.msg, 1500);
							}else{
								let uploadFileData = JSON.parse(uploadFileRes.data);
								resolve(uploadFileData.saveName);
							}
						}
					});
				})
			},
			// 查看规格是否选中
			findToggleIsExists(attrId, itemId){
				let spec = this.spec;
				for (let i in spec[attrId]['attr']) {
					if(spec[attrId]['attr'][i].toggle) {
						if(spec[attrId]['attr'][i].id != itemId) return true;
					}
				}
				return false;
			},
			select_attr_func(e){
				let that = this;
				let attrId = e.currentTarget.dataset.attrId;
				let itemId = e.currentTarget.dataset.itemId;
				attrId = attrId.toString();
				let type = e.currentTarget.dataset.type;
				let key = e.currentTarget.dataset.key;
				let attrArr = that.attr;
				if(type == '1') {
					if(that.findToggleIsExists(attrId, itemId)) {
						henglang.showToast('必选项只能选一个喔', 1000);
					}else{
						let index = that.spec_ids.indexOf(itemId);
						if(index =='-1') {
							that.spec_ids.push(itemId);
							that.spec[attrId]['attr'][key]['toggle'] = 1;
						}else{
							that.spec_ids.splice(index, 1);
							that.spec[attrId]['attr'][key]['toggle'] = 0;
						}
					}
					that.spec = that.get_json(this.spec);
				}else{
					let index = that.attr_ids.indexOf(attrId);
					if(index =='-1') {	// 如果不存在里面就添加id并且增加class
						that.attr_ids.push(attrId);
						that.attr[itemId]['attr'][key]['toggle'] = 1;
					}else{
						that.attr_ids.splice(index, 1);
						that.attr[itemId]['attr'][key]['toggle'] = 0;
					}
					that.attr = that.get_json(this.attr);
				}
			},
			get_json(array){
				let attr_data = JSON.parse(JSON.stringify(array))
				return attr_data;
			},
			changeShow(name) {
				this.$refs[name].show();
			},
			showMulLinkageThreePicker() {
			    this.$refs.mpvueCityPicker.show();
				uni.hideKeyboard()
			},
			onConfirm(e) {
			    let val = e.value;
			    this.pickerText = e.label.replace(/-/g, ' ');
			    this.province = province[val[0]].value;
			    this.city = city[val[0]][val[1]].value;
			    this.zone = area[val[0]][val[1]][val[2]].value;
			},
			confirm(res) {
				let last_class_id = 0;
				let steps1 = res.data.steps1;
				let steps2 = res.data.steps2;
				let steps3 = res.data.steps3;
				let that = this;
				that.bIsShowLoading = true;
				if(steps1.id != 0){
					that.sel_class_name = steps1.name;
					last_class_id = steps1.id;
				}
				if(steps2.id !=0){
					that.sel_class_name +=","+steps2.name;
					last_class_id = steps2.id;
				}
				if(steps3.id!=0){
					that.sel_class_name += ","+steps3.name;
					last_class_id = steps3.id;
				}
				that.last_class_id = last_class_id;
				that.transfer_row.cate_path = that.sel_class_name;
				that.QueryAttrWithCategoryId({category_id: that.last_class_id});
			},
			QueryAttrWithCategoryId(data){
				
				let that = this;
				henglang.get('Pawn/QueryAttrWithCategoryId', data, false, function(res){
					let resdata = res.data;
					that.bIsShowLoading = false;
					if(resdata.code == '0') {
						that.show_attr_box = 0;
						that.attr = that.spec = [];
						if(JSON.stringify(resdata.data.attr) !== '[]' || JSON.stringify(resdata.data.spec) !== '[]'){

							that.show_attr_box = 1;							
						}
						
						if(JSON.stringify(resdata.data.attr) !== '[]'){
							that.attr = resdata.data.attr;
						}
						if(JSON.stringify(resdata.data.spec) !== '[]'){
							that.attr = resdata.data.spec;
						}
					}
				});
			},
			// 点击打开属性
			control_attr_display(e){
				let type = e.currentTarget.dataset.type;
				if(type && type == '1' && this.transfer_id == 0) {	// 重置class选中和清空已经选择的规格和属性id 条件是不在修改的情况下
					this.attr_ids = [];
					this.spec_ids = [];
					for (let i in this.attr) {
						for (let k in this.attr[i].attr) {
							this.attr[i]['attr'][k]['toggle'] = 0;
						}
					}
					for (let i in this.spec) {
						for (let k in this.spec[i].attr) {
							this.spec[i]['attr'][k]['toggle'] = 0;
						}
					}
				}
				if(this.attr_ids.length>0 || this.spec_ids.length>0) {
					this.show_more_attr = 1;
				}else{
					this.show_more_attr = 0;
				}
				uni.setNavigationBarTitle({
				    title: this.bIsShowAttr?'发布':'基本参数'
				});
				this.bIsShowAttr = this.bIsShowAttr?false:true;
			},
			// 删除图片
			delete_image(e){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除图片吗？',
				    success: function (res) {
				        if (res.confirm) {
				            let image = e.currentTarget.dataset.image;
				            var index = that.imageList.indexOf(image);
				            if (index > -1) that.imageList.splice(index, 1);
							henglang.get('Pawn/deleteImage', {filePath: image}, false, function(res){
								that.imageList.splice(index,1);
							})
				        }
				    }
				});
			},
			open_category(){
			},
			text_focus(e){
				let val = e.target.value;
				this.isShow = 0;
			},
			text_blur(e){
				let val = e.target.value;
				if(val.length == 0) {
					this.isShow = 1;
				}
				this.content = val;
			},
			input_title(e){
				let val = e.target.value;
				this.title = val;
			},
			text_input(e) {
				let val = e.target.value;
				this.isShow = val.length == 0 ? '1' : '0';
			},
			// 价格
			// input_price(e){
			// 	let val = e.target.value;
			// 	this.buyout_price = val;
			// },
			choose_image(){
				let that = this;
				if(that.imageList.length==6) return henglang.showToast('只能上传6张图片', 1500);
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					count: that.countPhoto,
					success: (res) => {
						let filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: henglang.host + 'Upload/uploadCustom',
							fileType: 'image',
							filePath: filePath,
							name: 'photo',
							formData: {'app-key': henglang.app_key},
							header:{'app-key': henglang.app_key},
							success: (uploadFileRes) => {
								let data = uploadFileRes.data;
								data = JSON.parse(data);
								if(data.code == 0) {
									that.imageList = that.imageList.concat({
										'temp': filePath,
										'url': data.data.url
									});
								}else{
									henglang.showToast(data.msg, 1500);
								}
							}
						});
					}
				})
			},
			release: async function(){
				let that = this;
				let imageList=[];
				for(let i in that.imageList) {
					imageList.push(that.imageList[i]['url']);
				}
				let sendData={
					title: that.title,
					content: that.content,
					photos: imageList.join("|"),
					cate_id: that.last_class_id,
					buyout_price: that.buyout_price,
					province: that.province,
					city: that.city,
					zone: that.zone,
					video_src: that.video_src,
					attr_ids: that.attr_ids,
					spec_ids: that.spec_ids
				};
				if(that.transfer_id) {
					sendData.transfer_id = that.transfer_id;
				}
				if(sendData.video_src && sendData.video_src.indexOf("api.gdhenglang.com") == '-1') {
					sendData.video_src = await that.uploadFile(sendData.video_src)
				}
				if(that.transfer_id) {
					sendData.select_spec = that.select_spec;
					sendData.select_attr = that.select_attr;
				}
				if(sendData.title =='') return henglang.showToast('请填写商品标题');
				if(sendData.content =='') return henglang.showToast('请填写商品描述');
				if(sendData.province == '') return henglang.showToast('请选择省份');
				if(sendData.city == '') return henglang.showToast('请选择城市');
				if(sendData.zone == '') return henglang.showToast('请选择区域');
				if(imageList.length ==0) return henglang.showToast('请至少上传一张图片');
				that.bIsShowLoading = true;
				henglang.post('Pawn/publish',sendData,false,function(res){
					that.bIsShowLoading = false;
					if (res.data.code == -1) {
					    henglang.showToast(res.data.msg);
					}else{
						uni.redirectTo({
							url: '/pages/transfer/publish_success?id=' + res.data.id
						})
					}
				});
			}
		}
	}
</script>